<template>
  <section style="padding: 16px">
    <h2>Test Interaction</h2>

    <TestButton @clicked="onChildClicked" />

    <button
      :disabled="loading"
      @click="handleAction"
    >
      {{ loading ? 'Loading...' : 'Run handleAction' }}
    </button>
  </section>
</template>

<script setup lang="ts">
import TestButton from './TestButton.vue'
import { ref } from 'vue'

const loading = ref(false)

const onChildClicked = () => {
  console.log('Parent received clicked')
}

const handleAction = async () => {
  loading.value = true
  try {
    const res = await new Promise(r => setTimeout(() => r('OK'), 300))
    console.log('response', res)
  } finally {
    loading.value = false
  }
}
</script>
